<template>
    <!-- 计算属性 -->

    <!-- vue2的计算属性语法 -->

    <!-- /**
        computed:{
            checkAll(){
                return a+b;
            }
        }

        另一种写法：
        computed:{
            checkAll(){
                get(){
                    return a+b;
                },
                set(newVal){
                    console.log(newVal)
                }
            }
        }
    
        直接使用this.checkAll来进行调用
        
        vue3的计算属性
        
    **/ -->
    <div>
        <p>
            {{ num }}
        </p>

        计算属性：
        <span>{{  doubleNum  }}</span>


        <hr>
        有set的computed
        <span>  {{ threeNum }}</span>
<hr>
        改变threeNum的值
        <button @click="handleCK">改变threeNum的值</button>
    </div>
</template>

<script lang='ts' setup>

import { computed, ref } from "vue"
    let num = ref(20);

    let doubleNum = computed(()=>{
        return num.value *2
    })

    let threeNum = computed({
        get(){
            return num.value+4;
        },
        set(val){
            console.log(val);
            console.log(num.value);
            
            num.value = val
        }
    })

    const handleCK = ()=>{
        threeNum.value = 100
    }
</script>
 
<style lang = "less" scoped>
    
</style>